<template>
  <div class="student-container">
    <!-- 统计卡片区域 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="8">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <el-icon>
                <User />
              </el-icon>
              <span>学生总数</span>
            </div>
          </template>
          <div class="card-number">{{ totalCount }}</div>
        </el-card>
      </el-col>

      <!-- 新增宿舍信息卡片 -->
      <el-col :span="14">
        <el-card class="dorm-info-card">
          <template #header>
            <div class="card-header">
              <el-icon>
                <House />
              </el-icon>
              <span>宿舍信息</span>
            </div>
          </template>
          <div class="dorm-list">
            <div v-for="(dorm, index) in dormitories" :key="dorm.name" :class="['dorm-item', `dorm-${index + 1}`]">
              <div class="dorm-icon">
                <el-icon>
                  <HomeFilled />
                </el-icon>
              </div>
              <div class="dorm-name">{{ dorm.name }}</div>
              <div class="dorm-count">{{ dorm.count }}人</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <div class="table-header">
        <el-button type="primary" :icon="Plus" class="add-button" @click="handleAdd">
          添加学生
        </el-button>
      </div>
      <el-table :data="filterStudents" v-loading="loading" border stripe highlight-current-row
        :header-cell-style="{ background: '#f5f7fa' }">
        <el-table-column type="index" label="#" width="60" align="center">
          <template #default="scope">
            <div class="index-cell">{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="student_id" label="学号" align="center" width="120">
          <template #default="{ row }">
            <el-tag effect="plain">{{ row.student_id }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="姓名" align="center" width="120">
          <template #default="{ row }">
            <div class="name-cell">
              <el-avatar :size="30" :src="row.avatar || defaultAvatar" />
              <span>{{ row.name }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="major" label="专业" align="center">
          <template #default="{ row }">
            <el-tag :type="getRandomType()" effect="light">{{ row.major }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="宿舍信息" align="center">
          <template #default="{ row }">
            <div class="dorm-info">
              <el-tooltip :content="'点击查看' + row.name + '的宿舍详情'" placement="top">
                <el-tag type="success" effect="dark" class="dorm-tag">
                  {{ row.dormitory.address }}
                </el-tag>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button type="primary" :icon="Edit" size="small" @click="handleEdit(row)">
                编辑
              </el-button>
              <el-button type="danger" :icon="Delete" size="small" @click="handleDelete(row)">
                删除
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination background v-model:current-page="currentPage" v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <!-- 在 template 最后添加对话框组件 -->
    <el-dialog v-model="dialogVisible" title="添加学生" width="50%" center destroy-on-close class="student-dialog">
      <el-form ref="formRef" :model="studentForm" :rules="rules" label-width="100px" class="student-form">
        <!-- 学号和姓名 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学号" prop="student_id">
              <el-input v-model="studentForm.student_id" placeholder="请输入学号">
                <template #prefix>
                  <el-icon>
                    <UserFilled />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="studentForm.name" placeholder="请输入姓名">
                <template #prefix>
                  <el-icon>
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 专业和宿舍 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="专业" prop="major">
              <el-select v-model="studentForm.major" placeholder="请选择专业" class="w-full">
                <el-option v-for="item in majors" :key="item" :label="item" :value="item">
                  <span class="major-option">
                    <el-icon>
                      <School />
                    </el-icon>
                    {{ item }}
                  </span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="宿舍" prop="dormitory">
              <el-cascader v-model="studentForm.dormitory_id" :options="dormOptions" :props="{
                expandTrigger: 'hover',
                value: 'value',
                label: 'label',
                emitPath: false
              }" placeholder="请选择宿舍" class="w-full" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            确 定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Plus, Edit, Delete, User, House, HomeFilled, UserFilled } from '@element-plus/icons-vue'
import { getStudentListAPI, addStudentAPI, deleteStudentAPI } from '@/api/student'
onMounted(() => {
  getStudentList()
})

// 获取学生列表
const getStudentList = async () => {
  loading.value = true
  const { data: res } = await getStudentListAPI()
  console.log(res);
  if (res.status !== 0) {
    // eslint-disable-next-line no-undef
    ElMessage.error('获取学生列表失败')
    return
  }
  studentList.value = res.data
  totalCount.value = res.data.length
  loading.value = false
  // eslint-disable-next-line no-undef
  ElMessage.success('获取学生列表成功')

}

const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
const loading = ref(false)
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)

// 模拟数据
const studentList = ref([])

// 宿舍数据
const dormitories = [
  { name: '义苑', count: 500 },
  { name: '爱苑', count: 450 },
  { name: '信苑', count: 480 },
  { name: '平苑', count: 460 }
]

// 搜索过滤
const filterStudents = computed(() => {
  return studentList.value.filter(student =>
    student.name.includes(searchQuery.value) ||
    student.student_id.includes(searchQuery.value) ||
    student.major.includes(searchQuery.value)
  )
})

// 随机标签类型
const getRandomType = () => {
  const types = ['', 'success', 'warning', 'info', 'danger']
  return types[Math.floor(Math.random() * types.length)]
}

// 处理事件
const handleAdd = () => {
  dialogVisible.value = true
}

const handleEdit = (row) => {
  // eslint-disable-next-line no-undef
  ElMessage.info(`正在编辑: ${row.name}`)
}

const handleDelete = (row) => {
  // eslint-disable-next-line no-undef
  ElMessageBox.confirm(
    `确定要删除学生 ${row.name} 吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    deleteStudentAPI(row.student_id).then(res => {
      console.log(res);

      if (res.data.status !== 0) {
        // eslint-disable-next-line no-undef
        ElMessage.error('删除学生失败')
        return
      }
      // 重新获取学生列表
      getStudentList()
    })
    // eslint-disable-next-line no-undef
    ElMessage.success('删除成功')
  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 对话框相关数据和方法
const dialogVisible = ref(false)
const studentForm = ref({
  student_id: '',
  name: '',
  major: '',
  dormitory_id: null,
})
const rules = {
  student_id: [{ required: true, message: '请输入学号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  major: [{ required: true, message: '请选择专业', trigger: 'change' }],
  dormitory_id: [{ required: true, message: '请选择宿舍', trigger: 'change' }],
}
const majors = ['计算机科学与技术', '软件工程', '信息安全', '数字媒体技术']
const dormOptions = [
  {
    value: 1,
    label: '义苑',
  },
  {
    value: 2,
    label: '爱苑',
  },
  {
    value: 3,
    label: '信苑',
  },
  {
    value: 4,
    label: '平苑',
  }
]
const submitLoading = ref(false)
const formRef = ref(null)


const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      // console.log(studentForm);
      submitLoading.value = true
      const { data: res } = await addStudentAPI(studentForm.value)
      if (res.status !== 0) {
        // eslint-disable-next-line no-undef
        ElMessage.error('添加学生失败')
        submitLoading.value = false
        return
      }
      // eslint-disable-next-line no-undef
      ElMessage.success('添加学生成功')
      dialogVisible.value = false
      submitLoading.value = false
      // 重置表单
      studentForm.value = {
        student_id: '',
        name: '',
        major: '',
        dormitory_id: null,
      }
      // 重新获取学生列表
      await getStudentList()
    }
  })
}
</script>

<style scoped>
.student-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* 统一卡片间距 */
}

.stats-row {
  margin-bottom: 0;
  /* 移除原有的下边距 */
  display: flex;
  gap: 20px;
  /* 统一左右卡片间距 */
}

/* 统一所有卡片的基础样式 */
.stat-card,
.dorm-info-card,
.table-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
  transition: all 0.3s;
}

/* 替换原有的 stats-card 相关样式 */
.stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.15);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 15px;
}

.card-header span {
  color: white;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.card-header .el-icon {
  font-size: 24px;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px;
  border-radius: 12px;
}

.card-number {
  font-size: 36px;
  font-weight: bold;
  color: white;
  text-align: center;
  padding: 20px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* 新增宿舍信息卡片样式 */
.dorm-info-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dorm-info-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

.dorm-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 15px;
  align-items: center;
}

.dorm-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s;
  backdrop-filter: blur(5px);
  cursor: pointer;
  height: 120px;
  /* 固定高度使其更整齐 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.dorm-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.dorm-icon {
  font-size: 24px;
  color: white;
  margin-bottom: 8px;
}

.dorm-name {
  color: white;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.dorm-count {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

/* 为每个宿舍添加不同的悬停效果 */
.dorm-1:hover {
  background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%);
}

.dorm-2:hover {
  background: linear-gradient(45deg, #a8edea 0%, #fed6e3 99%);
}

.dorm-3:hover {
  background: linear-gradient(45deg, #d299c2 0%, #fef9d7 99%);
}

.dorm-4:hover {
  background: linear-gradient(45deg, #f6d365 0%, #fda085 99%);
}

@keyframes shine {
  0% {
    transform: rotate(45deg) translate(-150%, -150%);
  }

  100% {
    transform: rotate(45deg) translate(150%, 150%);
  }
}

/* 添加按钮样式 */
.table-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

.add-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s;
}

.add-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(102, 126, 234, 0.2);
}

/* 可以删除原有的 .stats-card, .card-trend, .trend-up, .action-col 相关样式 */
.table-card {
  background: linear-gradient(135deg, #f6f8ff 0%, #f0f3ff 100%);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
  border: none;
  padding: 20px;
  transition: all 0.3s;
  margin-top: 0;
  /* 移除原有的上边距 */
}

.table-card:hover {
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.15);
}

/* 表格样式优化 */
:deep(.el-table) {
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
}

:deep(.el-table__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

:deep(.el-table__header-row th) {
  background: transparent !important;
  color: white;
  font-weight: 600;
  font-size: 15px;
  padding: 16px 0;
}

:deep(.el-table__row) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-table__row:hover) {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.15);
  background: rgba(255, 255, 255, 0.9) !important;
}

/* 单元格样式优化 */
.index-cell {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

.name-cell {
  padding: 8px 0;
}

.name-cell .el-avatar {
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
  transition: all 0.3s;
}

.name-cell:hover .el-avatar {
  transform: scale(1.1) rotate(10deg);
}

/* 标签样式优化 */
:deep(.el-tag) {
  border-radius: 20px;
  padding: 6px 16px;
  font-weight: 500;
  transition: all 0.3s;
}

:deep(.el-tag:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 操作按钮样式 */
:deep(.el-button-group) {
  display: flex;
  gap: 8px;
}

:deep(.el-button-group .el-button) {
  border-radius: 8px !important;
  padding: 8px 16px;
  transition: all 0.3s;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

:deep(.el-button--danger) {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  border: none;
}

/* 分页器样式优化 */
.pagination {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 15px 20px;
  margin-top: 25px;
}

:deep(.el-pagination.is-background .el-pager li) {
  border-radius: 8px;
  transition: all 0.3s;
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 加载动画样式 */
:deep(.el-loading-spinner .path) {
  stroke: #667eea;
}

:deep(.el-loading-spinner .el-loading-text) {
  color: #667eea;
}

/* 表格空状态样式 */
:deep(.el-table__empty-block) {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
}

:deep(.el-table__empty-text) {
  font-size: 16px;
  color: #666;
}

/* 对话框样式 */
.student-dialog {
  .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    background: #f5f7fa;
  }
}

.student-dialog :deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  background: linear-gradient(135deg, #f6f8ff 0%, #f0f3ff 100%);
}

.student-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  margin: 0;
}

.student-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}

.student-dialog :deep(.el-dialog__close) {
  color: white;
  transform: scale(1.2);
  transition: all 0.3s;
}

.student-dialog :deep(.el-dialog__close:hover) {
  transform: scale(1.4) rotate(90deg);
}

.student-form {
  padding: 30px 20px;
}

/* 表单项样式 */
:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  border-radius: 8px;
  transition: all 0.3s;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #764ba2 inset;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px #667eea inset !important;
}

.el-select :deep(.el-input__wrapper) {
  cursor: pointer;
}

/* 头像上传样式 */
.avatar-uploader {
  width: 148px;
  height: 148px;
  border: 2px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-uploader:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(102, 126, 234, 0.15);
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  text-align: center;
  color: #8c939d;
}

.avatar-placeholder .el-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

/* 底部按钮样式 */
.dialog-footer {
  padding: 20px;
  text-align: right;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

.dialog-footer .el-button {
  padding: 12px 24px;
  transition: all 0.3s;
}

.dialog-footer .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.dialog-footer .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(102, 126, 234, 0.2);
}

/* 专业选项样式 */
.major-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.major-option .el-icon {
  color: #667eea;
}
</style>